<template>
  <!-- 老虎机游戏记录 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="dataList" @query="getDataList(true)" @reset="refresh">
        <template v-slot:row>
          <el-form-item label="渠道:" label-width="50px">
            <el-select v-model="listQuery.agent_id" placeholder="请选择渠道" filterable>
              <el-option label="全部" value="" ></el-option>
              <el-option :label="'【'+item.value+'】'+item.label" :value="item.value" v-for="(item, index) in channelData" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item  label="日期时间:" label-width="75px">
            <el-date-picker is-range v-model="listQuery.dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" 
            end-placeholder="结束日期" class="full-width-input time-box" :default-time="['00:00:00', '23:59:59']" :clearable="false"></el-date-picker>
          </el-form-item>
          <el-form-item label="玩家ID:" label-width="60px">
            <el-input type="number" v-model="listQuery.user_id" clearable placeholder="请输入玩家ID"/>
          </el-form-item>
          <el-form-item label="牌局编号:" label-width="80px">
            <el-input type="number" v-model="listQuery.game_number" clearable placeholder="请输入牌局编号"/>
          </el-form-item>
          <el-form-item label="是否触发免费:" label-width="120px">
            <el-select v-model="listQuery.is_trigger_free" placeholder="请选择是否触发免费" filterable >
              <el-option label="全部" :value="-1" ></el-option>
              <el-option label="未触发" :value="0" ></el-option>
              <el-option label="触发" :value="1" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="触发Jackpot类型:" label-width="130px">
            <el-select v-model="listQuery.trigger_jackpot_type" placeholder="请选择触发Jackpot类型" filterable >
              <el-option label="全部" :value="-1" ></el-option>
              <el-option label="Mini" :value="1" ></el-option>
              <el-option label="Minor" :value="2" ></el-option>
              <el-option label="Major" :value="3" ></el-option>
              <el-option label="Grand" :value="4" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="触发bonus类型:" label-width="120px">
            <el-select v-model="listQuery.is_trigger_bonus" placeholder="请选择触发bonus类型" filterable >
              <el-option label="全部" :value="-1" ></el-option>
              <el-option label="触发转盘" :value="1" ></el-option>
              <el-option label="触发了银行" :value="2" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="押注类型:" label-width="80px">
            <el-select v-model="listQuery.operation_type" placeholder="请选择押注类型" filterable >
              <el-option label="全部" :value="-1" ></el-option>
               <el-option :label="item.label" :value="item.value" v-for="(item, index) in operationTypeData" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="中奖倍数范围:" label-width="110px">
            <el-input class="width150" type="number" :min="0" v-model="listQuery.winning_multiple_start" clearable placeholder="中奖倍数Min>="/>
              —
            <el-input class="width150" type="number" :min="0" v-model="listQuery.winning_multiple_end" clearable placeholder="中奖倍数Max=<"/>
          </el-form-item>
        </template>
        <template v-slot:actions>
          <div class="flexDetween">
            <div class="statistic flex">
            <el-button type="info" size="mini" icon="el-icon-refresh" @click="getDataList">刷新</el-button>
            <el-button class="marginL20 marginR20" type="success" size="mini" icon="el-icon-wallet" @click="isShowTotalsDetails=!isShowTotalsDetails,getSummyDataList()">统计</el-button>
            <div class="flex" v-show="isShowTotalsDetails" style="height:36px">
              <p> 玩家下注金额：<span class="colorGre">{{ totalForm.bet_amount }}</span></p>
              <p> 玩家中奖金额：<span class="colorGre">{{ totalForm.game_income }}</span></p>
              <p> 玩家输赢：<span :class="totalForm.user_income>0?'colorGre':'colorRed'">{{ totalForm.user_income }}</span></p>
            </div>
          </div>
            <el-button type="primary" size="mini" icon="el-icon-download" :disabled="!dataList.length"  @click="getExport">导出</el-button>
          </div>
        </template>
        <template>
          <el-table-column prop="agent_id" label="渠道名" align="center" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-show="scope.row.agent_id">【{{scope.row.agent_id}}】{{ $public.channelLabel(scope.row.agent_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="user_id" label="玩家ID" align="center" width="120"/>
          <el-table-column prop="nick_name" label="玩家昵称" align="center" width="150" show-overflow-tooltip/>
          <el-table-column prop="account_type" label="账户类型" align="center" width="120">
            <template slot-scope="scope">
              <el-tag :type="accountTag(scope.row.account_type)">{{ accountType(scope.row.account_type)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="game_number" label="牌局编号" align="center" width="120"/>
          <el-table-column prop="time_str" label="日期时间" align="center" width="180"/>
          <el-table-column prop="bet_amount" label="下注金额" align="center" width="150"/>
          <el-table-column prop="game_income" label="中奖金额" align="center" width="120"/>
          <el-table-column prop="amount_type" label="货币类型" align="center" width="120">
            <template slot-scope="scope">
              <el-tag type="">{{ amountType(scope.row.amount_type)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="operation_type" label="押注类型" align="center" width="100">
            <template slot-scope="scope">
              {{operationType(scope.row.operation_type)}}
            </template>
          </el-table-column>
          <el-table-column prop="real_game_income" label="真实收益" align="center" width="150"/>
          <el-table-column prop="is_trigger_free" label="是否触发免费" align="center" width="150">
            <template slot-scope="scope">
              <el-tag :type="scope.row.is_trigger_free?'success':'danger'">{{ scope.row.is_trigger_free?'免费':'未触发'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="is_trigger_jackpot" label="是否触发Jackpot" align="center" width="150">
            <template slot-scope="scope">
              <el-tag :type="scope.row.is_trigger_jackpot?'success':'danger'">{{ scope.row.is_trigger_jackpot?'Jackpot':'未触发'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="trigger_jackpot_type" label="触发Jackpot的类型" align="center" width="160">
            <template slot-scope="scope">
              <el-tag type="">{{jackpotType(scope.row.trigger_jackpot_type)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="trigger_jackpot_amount" label="触发Jackpot的获得的钱" align="center" width="180">
            <template slot-scope="scope">
              {{ scope.row.trigger_jackpot_amount}}
            </template>
          </el-table-column>
          <el-table-column prop="is_trigger_bonus" label="触发bonus类型" align="center" width="150">
            <template slot-scope="scope">
              <el-tag type="">{{ scope.row.is_trigger_bonus==1?'触发转盘':scope.row.is_trigger_bonus==2?'触发银行':'未触发'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="bonus_level" label="当前bonus的等级" align="center" width="150"/>
        </template>
        <template v-slot:footer>
          <pagination :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getDataList" />
        </template>
      </search-table>
    </div>
  </div>
</template>

<script>
import {
  throttle
} from '@/utils/index'
import {
  getSlotUser,
  getSlotUserExport,
  getSlotUserSummy
} from '@/api/statistics'
import {
  ACCOUNT_TYPE
} from '@/utils/enum'
import SearchTable from '@/components/SearchTable'
export default {
  name: 'slotDetails',
  components: {
    SearchTable
  },
  data () {
    return {
      ACCOUNT_TYPE,
      channelData: this.$store.state.commonState.channelDataArray,
      listQuery: {
        page: 1,
        size: 50,
        agent_id:'',
        user_id:'',
        game_number:'',
        is_trigger_free:-1,
        trigger_jackpot_type:-1,
        is_trigger_bonus:-1,
        operation_type:-1,
        winning_multiple_start:'',
        winning_multiple_end:'',
        dateTime:[this.$public.getDateDay(0)+' 00:00:00',this.$public.getDateDay(0)+' 23:59:59'],
        start_time: '',
        end_time: '',
      },
      listLoading: true,
      dataList: [],
      currentTotal: 0,
      isShowTotalsDetails: false,
      totalForm:{
        bet_amount: '',// 玩家下注金额
        game_income: '',// 玩家中奖金额
        user_income: '',// 玩家输赢
      },
      amountTypeData:[
        {label:'卢比',value:1},
        {label:'筹码',value:2},
        {label:'佣金',value:3},
        {label:'体验金',value:4},
      ],
      operationTypeData:[
        {label:'普通押注',value:1},
        {label:'免费押注',value:2},
        {label:'转动转盘',value:3},
        {label:'银行免费押注',value:4},
        {label:'领取免费游戏奖励',value:5},
        {label:'领取转盘奖励',value:6},
        {label:'领取银行免费游戏奖励',value:7},
      ],
      jackpotTypeData:[
        {label:'未触发',value:0},
        {label:'Mini',value:1},
        {label:'Minor',value:2},
        {label:'Major',value:3},
        {label:'Grand',value:4},
      ]
    }
  },
  created () {},
  activated(){
    this.channelData=this.$store.state.commonState.channelDataArray
    this.getDataList();
    this.getSummyDataList();
  },
  methods: {
    // 老虎机游戏记录
    async getDataList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.dataList = []
      if (params.dateTime && params.dateTime[0] && params.dateTime[1]) {
        params.start_time = that.$public.standardDate(params.dateTime[0])
        params.end_time = that.$public.standardDate(params.dateTime[1])
      }
      if(Number(params.winning_multiple_start)>Number(params.winning_multiple_end)){
        return that.$message.error('请输入正确的中奖倍数范围！')
      }
      const response = await getSlotUser(params)
      if (response.code == 1) {
        if (response.data.list) {
          response.data.list.forEach(item=>{
            item.bet_amount=that.$public.mathNumberDivideWan(item.bet_amount)
            item.game_income=that.$public.mathNumberDivideWan(item.game_income)
            item.real_game_income=that.$public.mathNumberDivideWan(item.real_game_income)
            item.trigger_jackpot_amount=that.$public.mathNumberDivideWan(item.trigger_jackpot_amount)
          })
          that.dataList = response.data.list
          that.currentTotal = response.data.total
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 汇总
    async getSummyDataList () {
      let that = this,params=that.listQuery;
      if(!that.isShowTotalsDetails) return
      if (params.dateTime && params.dateTime[0] && params.dateTime[1]) {
        params.start_time = that.$public.standardDate(params.dateTime[0])
        params.end_time = that.$public.standardDate(params.dateTime[1])
      }
      const response = await getSlotUserSummy(params)
      if (response.code == 1) {
        if (response.data) {
          that.totalForm.bet_amount=that.$public.mathNumberDivideWan(response.data.bet_amount)
          that.totalForm.game_income=that.$public.mathNumberDivideWan(response.data.game_income)
          that.totalForm.user_income=that.$public.mathNumberDivideWan(response.data.user_income)
        }
      }else{
        that.$message.error(response.msg)
      }
    },
    // 导出
    getExport(){
      let that = this,serveUrl=process.env.VUE_APP_BASE_API.substring(0,process.env.VUE_APP_BASE_API.length-6);
      getSlotUserExport(that.listQuery).then(res => {
        if (res.code == 1) {
          window.open(serveUrl+res.data)
        }
      }).catch((error) => {
        that.$message.error(error.msg)
      })
    },
    // 货币类型展示
    amountType(cellValue){
      return (this.amountTypeData.find((item) => item.value === cellValue)?.label || "-");
    },
    // 账号类型展示
    accountType(cellValue){
      return (this.ACCOUNT_TYPE.find((item) => item.value === cellValue)?.label || "测试账号");
    },
    // 账号类型展示
    accountTag(cellValue){
      return (this.ACCOUNT_TYPE.find((item) => item.value === cellValue)?.type || "-");
    },
    // 押注类型展示
    operationType(cellValue){
      return (this.operationTypeData.find((item) => item.value === cellValue)?.label || "-");
    },
    // 押注类型展示
    jackpotType(cellValue){
      return (this.jackpotTypeData.find((item) => item.value === cellValue)?.label || "-");
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        agent_id:'',
        user_id:'',
        game_number:'',
        is_trigger_free:-1,
        trigger_jackpot_type:-1,
        is_trigger_bonus:-1,
        operation_type:-1,
        winning_multiple_start:'',
        winning_multiple_end:'',
        dateTime:[this.$public.getDateDay(0)+' 00:00:00',this.$public.getDateDay(0)+' 23:59:59'],
        start_time: 0,
        end_time: 0,
      }
      this.getDataList()
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>
.nameInfo {
  color: #409EFF;
  padding-bottom: 2px;
  border-bottom:1px solid #409EFF;
  cursor: pointer;
}
</style>
